https://bootstrap5.hexschool.com/docs/5.1/getting-started/webpack/

1. 全使用BS內css樣式，可以直接匯入

https://bootstrap5.hexschool.com/docs/5.1/getting-started/webpack/#importing-compiled-css

2. 使用Bs樣式並更改其樣式時(預編譯)，使用scss

https://bootstrap5.hexschool.com/docs/5.1/getting-started/webpack/#importing-precompiled-sass
詳細見 5.如何在 Cli 環境中加入 Vue 元件
https://ithelp.ithome.com.tw/articles/10282453

<style lang="scss">
@import "./assets/all";
</style>

3. 使用Bs內Js(動畫效果)

https://bootstrap5.hexschool.com/docs/5.1/getting-started/webpack/#importing-javascript
全域匯入時可能因當初設定專案方式(Eslink)有錯誤 使用任一code皆可

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

4. Bs4 vs Bs5 差異 (Bs5無須jQuery)

Bootstrap 5 被設計成不需要使用 jQuery，但仍有機會將我們的元件與 jQuery 一起做使用。如果 Bootstrap 在 window 物件檢測到 jQuery，它將會把 Bootstrap 的所有元件加入 jQuery 的插件系統中；這意味著您將能夠用 $('[data-bs-toggle="tooltip"]').tooltip() 來啟用工具提示。我們的其他元件也是如此運作。

目前專案使用 scss + Bs內Js

記得一定要使用container，因BS5會直接把網頁的內建padding與margin取消掉

<div class="container">
    <div class="row">
        <div class="col">
            <div class="h4">
                Lorem ipsum dolor sit amet consectetur.
            </div>
        </div>
    </div>
</div>

5.使用JQ

(1)安裝

npm i jquery

(2)匯入
全域放main.js、區域放該網頁下
import $ from 'jquery'

(3)將Jq程式碼放mounted()
以下區域引用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{testData}}</p>
  </div>
</template>

<script>
import $ from 'jquery';
export default {
  data() {
    return {
      testData:'',
    }
  },
  mounted() {
    this.testData = $('h1').text();
  },
}
</script>

5.使用 Gsap

參考：
https://www.youtube.com/watch?v=qk7Xj4Q0IuE
https://chupai.github.io/posts/200229_gsap3/#10-%E7%9B%B8%E5%B0%8D%E5%8B%95%E7%95%AB%E6%99%82%E9%96%93
https://chupai.github.io/posts/200229_gsap3/

(1) 安裝

npm i gsap

(2)引用

import gsap from "gsap";

(3)使用

必須讓 transition-group 下行接 v-for的 才能讓gsap抓到key!!

        <transition-group appear @before-enter="beforeEnter" @enter="enter">
          <div
            class="col"
            v-for="(item, key) in products"
            :data-index="key"
            :key="item.id + key"
          >
            <div class="card product">
              <img
                v-on:click.prevent="getProduct(item.id)"
                :src="`${item.imageUrl}`"
                class="card-img-top"
                alt="..."
              />
              <div class="card-body">
                <h5 class="card-title text-center">{{ item.title }}</h5>
                <div class="card-text text-center">
                  <div class="h5" v-if="!item.price">
                    {{ item.origin_price }} 元
                  </div>
                  <br />
                  <del class="h6" v-if="item.price"
                    >original price {{ item.origin_price }} NT</del
                  >

                  <div class="h5" v-if="item.price">
                    special offer {{ $filters.currency(item.price) }} NT
                  </div>
                </div>
              </div>
              <button
                @click="getProduct(item.id)"
                type="button"
                class="btn btn-outline-secondary"
                style="font-weight: bold"
              >
                SEE MORE
              </button>
              <!-- API需要product_id(String)、qty(Number) -->
              <!-- 樣式：disabled 按鈕不能按 -->
              <!-- 如果倉庫收到的值 === 當前id -->
              <button
                v-on:click="addCart(item.id)"
                v-bind:disabled="this.status.loadingItem === item.id"
                type="button"
                class="btn btn-outline-danger"
                style="font-weight: bold"
              >
                <!-- BS樣式 -->
                <!-- https://getbootstrap.com/docs/5.1/components/spinners/ -->
                <div
                  v-if="this.status.loadingItem === item.id"
                  class="spinner-grow spinner-grow-sm text-danger"
                  role="status"
                >
                  <span class="visually-hidden">Loading...</span>
                </div>
                Add Cart
              </button>
            </div>
          </div>
        </transition-group>

    beforeEnterBottom(el) {
      console.log("aaa");
      el.style.opacity = 0;
      el.style.transform = "translateY(60px)";
    },
    enterBottom(el) {
      console.log("aaa");
      gsap.to(
        el,
        {
          opacity: 1,
          y: 0,
          duration: 1,
          delay: el.dataset.index * 0.5,
        },
        "6"
      );
    },

6.滾輪特效 scrolltrigger

https://www.facebook.com/groups/vuejs.tw/posts/4421028727976825/
vue-scrollmagic 不支援 Vue3 因此 使用 gsap 的套件 scrolltrigger
(1) 引用 ( gsap內含該套件 )

import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

(2) 使用
https://ithelp.ithome.com.tw/articles/10257007
https://huanyichuang.com/blog/gsap-scrolltrigger-counter/

    enterBottom(el) {
      console.log("aaa");
      gsap.registerPlugin(ScrollTrigger);
      gsap.to(el, {
        opacity: 1,
        y: 0,
        x: 0,
        duration: 1,
        delay: el.dataset.index * 0.5,
        scrollTrigger: {
          trigger: el,
          // 在這個情境 trigger 要是物件，不是選擇器
          toggleActions: "play none none none",
          // scrub: true, // 物件動畫根據卷軸捲動程度跑
          start: "top center",
          // end: "+=100",
          // markers: true,
        },
      });
    },

通常下在 mounted()

<h1 class="title">可使用 管理者登入</h1>

mounted() {
    // title動畫
    gsap.registerPlugin(ScrollTrigger);
    gsap.to(".title", {
      opacity: 0,
      duration: 1,
      y: 0,
      x: 100,
      scrollTrigger: {
        trigger: ".title",
        // 在這個情境 trigger 要是物件，不是選擇器
        toggleActions: "play none none none",
        scrub: true, // 物件動畫根據卷軸捲動程度跑
        start: "top",
        // end: "+=100",
        // markers: true,
      },
    });